<!-- 高州欢乐行 -->
<template>
  <div class="container" v-title data-title="活动详情">
    <div class="suite" v-if="state">
      <div class="thumbImg">
        <img :src="require('./styles/asset/gaozhou/gz_01.jpg?a=1')" />
      </div>
      <!-- <div class="coupon1">
        <div><img :src="require('./styles/asset/1_05.png')" /><a v-on:click="buySuite(productId[0])"></a></div>
      </div>
      <div class="coupon2">
        <div><img :src="require('./styles/asset/1_08.png')" /><a v-on:click="buySuite(productId[1])"></a></div>
        <div><img :src="require('./styles/asset/1_11.png')" /><a v-on:click="buySuite(productId[2])"></a></div>
      </div> -->
      <ul class="coupon">
      	<li :class="[ind == 0 ? 'active clearfix': 'clearfix']" @click="clickChoice(0)">
			<div class="left">天卡</div>
			<div class="right">￥{{price[0]}}</div>
			<div class="middle">￥3.00</div>
      	</li>
      	<li :class="[ind == 1 ? 'active clearfix': 'clearfix']" @click="clickChoice(1)">
			<div class="left">三天卡</div>
			<div class="right">￥{{price[1]}}</div>
			<div class="middle">￥9.00</div>
      	</li>
      	<li :class="[ind == 2 ? 'active clearfix': 'clearfix']" @click="clickChoice(2)">
			<div class="left">周卡</div>
			<div class="right">￥{{price[2]}}</div>
			<div class="middle">￥21.00</div>
      	</li>
        <li :class="[ind == 3 ? 'active clearfix': 'clearfix']" @click="clickChoice(3)">
			<div class="left">月卡</div>
			<div class="right">￥{{price[3]}}</div>
			<div class="middle">￥91.50</div>
      	</li>
      </ul>
      <div class="thumbImg" style="margin-bottom:1.4rem;">
        <img :src="require('./styles/asset/gaozhou/gz_02.png?a=1')" />
      </div>
    </div>

    <div class="suite"  v-else>

    </div>
    <div class="btn clearfix">
        <p class="hint">套餐有效期：{{day}}天</p>
      	<div class="b-left">{{showText}}</div>
      	<div class="b-right" @click="buySuite(productId[ind])">立即购买</div>
    </div>
    <simplert ref="simplert"></simplert>
  </div>
</template>

<script>
var wx = require('weixin-js-sdk');
  import Simplert from '../components/dialog/dialog.vue'
    let filters = {
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  };
// 预发 productId:[26,27,38,40],
//生产 productId:[235,236,238,239],
  export default {
    data () {
      return {
        productId:[235,236,238,239],
        price: [2.6, 7.2, 15.4, 45],
        token:"",
        state:true,
        postState:false,
        ind: 0,
        img: require('./styles/asset/share.jpg'),
        wx_app:''
      }
    },
    created () {

    },
    computed:{
      showText(){
        let num  = this.price[this.ind]
        const reg = /^(\d+.\d+)$/;
        if(reg.test(num)){
          return num
        }else{
          return num+'.00'
        }

      },
      day(){
        if(this.ind == 0){
          return 1
        }else if(this.ind == 1){
          return 3
        }else if(this.ind == 2){
          return 7
        }else if(this.ind == 3){
          return 30
        }
      }
    },
    mounted(){
      if(document.documentElement.clientWidth>750)
      {
        document.documentElement.style.fontSize = '100px'
      }else{
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
      }
      const that = this;
      const url = window.location.href;
      if(url.indexOf('wx_app')>0){
        this.wx_app = filters.parseURL(url).params.wx_app;
        this.detail = filters.parseURL(url).params.detail;
        if(this.detail == 'true'){
          this.orderId = filters.parseURL(url).params.orderId;
        }
      }else{
        this.wx_app = ''
      }
      this.$util.getUserToken().then(token=>{
        that.token = token;
      })
      let root = process.env.MAIN_ROOT;
      this.$util.sendShareMessage("共享单车，快来试试>>","快来骑共享单车！用套餐，骑车更划算！一天、三天、一周、一月超值套餐活动火热进行中......", root+this.img);
      if(url.indexOf('wx_app')>0){
        let newUrl = this.$util.wxUrl(url);
        // 小程序分享title，url
        wx.miniProgram.postMessage({
          data: {
            title: '高州欢乐行',
            wx_url: newUrl
          }
        })
      }
    },
    components: {
      Simplert

    },
    methods: {
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        }
        this.$refs.simplert.openSimplert(obj)
      },
      clickChoice(ind){
      	this.ind = ind;
      },
      buySuite(productId){
        if(!this.wx_app){
            let userAgentObj = navigator.userAgent;
            if(userAgentObj.match(/MicroMessenger/i)){
              //$(".weiChat").show();
              if(userAgentObj.match(/Android/i)){
                window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919'
              }else if(userAgentObj.match(/iPhone/i)) {
                window.setTimeout(function(){
                  window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
                },200)
              }else{
                window.location.href="http://download.xingjiakeji.com/";
              }
              return;
            }else{
              if(!this.token || this.token == undefined || this.token == ""){
                window.setTimeout(function(){
                  if(userAgentObj.match(/Android/i)){
                    window.location.href = 'http://app.qq.com/#id=detail&appid=1106220919';
                  }else if(userAgentObj.match(/iPhone/i)) {
                    window.location.href = "https://itunes.apple.com/cn/app/%E7%94%B5%E6%96%91%E9%A9%AC-%E8%AE%A9%E5%87%BA%E8%A1%8C%E6%9B%B4%E5%AE%89%E5%85%A8/id1252928655?mt=8";
                  }
                },1000);
                return;
              }
            }
        }

        if(this.postState){
          return
        }else{
          this.postState = true;
        }
        const that = this;
        this.open('确认购买',true,'确认',function(){
          that.$api.post('/product/v1/authApi/buy?productId='+productId,{},s=>{
            that.postState = false;
            let userAgentObj = navigator.userAgent;
            that.open('购买成功',false,'','','fade_success',function(){
              //兼容小程序
              if(that.wx_app){
                  if(that.detail == 'true'){
                    wx.miniProgram.reLaunch({url: '../detail/detail?orderId=' + that.orderId})
                  }
              }else{
                if(userAgentObj.match(/Android/i)){
                  window.control.refreshWallet();
                }else if(userAgentObj.match(/iPhone/i)){
                  refreshWallet();
                }
                that.$router.go(-1)
              }
            })
          },f=>{
            that.postState = false;
            if(f.resultCode == '30006')
            {
              that.open('余额不足请先充值！',true,'充值',function(){
                let userAgentObj = navigator.userAgent;
                //兼容小程序
                if(that.wx_app){
                  wx.miniProgram.navigateTo({url: '../user/balance/balance?detail=true'})
                }else{
                  if(userAgentObj.match(/Android/i)){
                    window.control.recharge();
                  }else if(userAgentObj.match(/iPhone/i)){
                    recharge();
                  }
                }
              })
            }else if(f.errorMessage){
              that.open(f.errorMessage,false,'','','fade_alert',function(){

              });
            }else{
              that.open('购买失败',false,'','','fade_alert',function(){

              });
            }
          },{
            'requestPlatform': that.wx_app,
            'token': that.token
          })
        },'',function(){
          that.postState = false;
        },"您是否确认购买此套餐？")
      },
    }
  }
</script>
<style scoped >
  @import "./styles/styles.css";
  .container{  width: 100%; height: 100%;}
  .suite{  margin: 0 auto; max-width: 750px; height: 100%; overflow-y: scroll;  background-color: #f7ece9;}
  .thumbImg>img{ width: 100%;}
  .thumb{ padding-bottom:0.2rem;}
  .thumb>img{ width: 100%;}
  .coupon{
  	width:7rem;
  	margin:-0.9rem auto 0 auto;
  }
  .coupon li{
	height:1.44rem;
	padding-left: 0.38rem;
	line-height: 1.44rem;
	border-radius: 0.15rem;
	border:0.03rem solid transparent;
	background: #fff;
	color:#999;
	font-size: 0.33rem;
	margin-bottom:0.3rem;
	box-shadow: 0 2px 25px 0 #ff7e59;
  }
  .coupon .active{
  	border-color: #ff7e59;
  	background: #fff2ee;
  }

  .coupon li>div{
	float: left;
  }
  .coupon .left{
  	width:2.8rem;
  	font-size: 0.34rem;
  	color:#333;
  	font-weight: bold;
  }
  .coupon .active .left{
    color:#ff5d2e;
  }
  .coupon .middle{
  	float: right;
  	text-align: center;
  	text-decoration: line-through;
  	width:1rem;
  	font-size: 0.20rem;
  	color:#999;
  }
  .coupon .right{
  	float: right;
  	width:1.38rem;
  	font-size: 0.34rem;
  	color:#ff5d2e;
  	font-weight: bold;
  }
  .coupon .red{
  	color:#ff5d2e;
  }
  .btn{
  	position: fixed;
  	left:0;
  	right:0;
  	bottom:0;
  	height:0.98rem;
  	background: #fff;
  	font-size: 0.3rem;
  	color:#ff5d2e;
  	border-top-right-radius: 0.25rem;
  	border-top-left-radius: 0.25rem;
  }
  .btn .b-left{
  	width:2.3rem;
  	height:0.98rem;
    font-size:0.4rem;
  	line-height: 0.98rem;
  	padding-left:0.25rem;
  	float: left;
  }
  .hint{
    position: absolute;
    left:1.6rem;
    top:0;
    font-size:0.26rem;
    line-height: 0.98rem;
    color:#666;

  }
  .btn .b-right{
  	float: right;
  	width:2.3rem;
  	height:0.98rem;
  	line-height: 0.98rem;
  	background: #ff5d2e;
  	color:#fff;
  	text-align: center;
  	border-top-right-radius: 0.25rem;
  }
</style>
